<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login, sendSmsCode, smsLogin } from '@/api/member/auth'
import { useUserStore } from '@/stores/user'

const tab = ref<'password' | 'sms'>('password')
const router = useRouter()
const user = useUserStore()

// 密码登录
const mobilePwd = ref('')
const password = ref('')
const loadingPwd = ref(false)

async function onLogin() {
  if (!mobilePwd.value || !password.value) return alert('请输入手机号与密码')
  loadingPwd.value = true
  try {
    const resp = await login({ mobile: mobilePwd.value, password: password.value })
    user.setSession({ userId: resp.userId, accessToken: resp.accessToken, refreshToken: resp.refreshToken, expiresTime: resp.expiresTime })
    router.push('/')
  } catch (e: any) {
    alert(e.message || '登录失败')
  } finally {
    loadingPwd.value = false
  }
}

// 短信登录（同时作为注册）
const mobileSms = ref('')
const code = ref('')
const loadingSms = ref(false)
const countdown = ref(0)
let timer: any = null

async function onSendCode() {
  if (!mobileSms.value) return alert('请输入手机号')
  try {
    await sendSmsCode({ mobile: mobileSms.value, scene: 1 }) // 会员登录场景 1
    countdown.value = 60
    if (timer) clearInterval(timer)
    timer = setInterval(() => {
      countdown.value -= 1
      if (countdown.value <= 0) clearInterval(timer)
    }, 1000)
  } catch (e: any) {
    alert(e.message || '发送验证码失败')
  }
}

async function onSmsLogin() {
  if (!mobileSms.value || !code.value) return alert('请输入手机号与验证码')
  loadingSms.value = true
  try {
    const resp = await smsLogin({ mobile: mobileSms.value, code: code.value })
    user.setSession({ userId: resp.userId, accessToken: resp.accessToken, refreshToken: resp.refreshToken, expiresTime: resp.expiresTime })
    router.push('/')
  } catch (e: any) {
    alert(e.message || '登录/注册失败')
  } finally {
    loadingSms.value = false
  }
}
</script>

<template>
  <div class="container auth">
    <div class="tabs">
      <button :class="{active: tab==='password'}" @click="tab='password'">密码登录</button>
      <button :class="{active: tab==='sms'}" @click="tab='sms'">验证码登录/注册</button>
    </div>

    <div v-if="tab==='password'" class="panel">
      <label>手机号</label>
      <input v-model="mobilePwd" type="tel" placeholder="请输入手机号" />
      <label>密码</label>
      <input v-model="password" type="password" placeholder="请输入密码" />
      <button :disabled="loadingPwd" @click="onLogin">{{ loadingPwd ? '登录中...' : '登录' }}</button>
    </div>

    <div v-else class="panel">
      <label>手机号</label>
      <input v-model="mobileSms" type="tel" placeholder="请输入手机号" />
      <div class="row">
        <label>验证码</label>
        <input v-model="code" type="text" placeholder="请输入验证码" />
        <button class="ghost" :disabled="countdown>0" @click="onSendCode">{{ countdown>0 ? `${countdown}s` : '获取验证码' }}</button>
      </div>
      <button :disabled="loadingSms" @click="onSmsLogin">{{ loadingSms ? '提交中...' : '登录 / 注册' }}</button>
    </div>
  </div>
</template>

<style scoped>
.auth { max-width: 420px; margin: 24px auto; border: 1px solid #eee; border-radius: 8px; padding: 16px; background: #fff; }
.tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tabs button { flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; background: #f7f7f7; }
.tabs button.active { background: #42b883; color: #fff; border-color: #42b883; }
.panel { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 12px; color: #666; }
input { padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; }
button { padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; background: #42b883; color: #fff; }
.row { display: grid; grid-template-columns: 80px 1fr 120px; align-items: center; gap: 8px; }
.ghost { background: #f7f7f7; color: #333; }
</style>